import React from 'react';
import { View, Text, Image } from '@tarojs/components';
import classNames from 'classnames';
import Taro from '@tarojs/taro';
import utils from '@/utils/index';
import pbarHome from '@/images/bar/barHome.png';
import pbarHomeActive from '@/images/bar/barHomeActive.png';
import pshoppingCart from '@/images/bar/shoppingCart.png';
import pshoppingCartActive from '@/images/bar/shoppingCartActive.png';
import pme from '@/images/bar/me.png';
import pmeActive from '@/images/bar/meActive.png';

import './index.scss';

const menuTabList = [
  {
    pagePath: '/pages/mainPages/homePage/homePage',
    iconPath: pbarHome,
    selectedIconPath: pbarHomeActive,
    text: '首页',
  },
  // {
  //   pagePath: '/pages/mainPages/cheaper/index',
  //   iconPath: pcheaper,
  //   selectedIconPath: pcheaperActive,
  //   text: '省钱',
  // },
  {
    pagePath: '/pages/mainPages/cart/index',
    iconPath: pshoppingCart,
    selectedIconPath: pshoppingCartActive,
    text: '购物车',
    banner: 'carNum',
  },
  {
    pagePath: '/pages/mainPages/me/index',
    iconPath: pme,
    selectedIconPath: pmeActive,
    text: '我的',
  },
];

const MenuTabs = ({ tabIndex = 0, banner = {} }) => {
  let bottomHight = Taro.$bottomHight;
  if (Taro.$isH5 && window.history.length == 1 && Taro.$isIphoneX) {
    bottomHight = true;
  }
  const setTab = (index, page) => {
    if (index !== tabIndex) {
      let url = page;
      if (!utils.getToken()) {
        Taro.navigateTo({
          url: '/pages/other/login/index',
        });
        return;
      }
      if (url == '/pages/mainPages/paymentCode/index') {
        Taro.navigateTo({
          url,
        });
      } else {
        Taro.reLaunch({
          url,
        });
      }
    }
  };

  return (
    <View className={['menuTabs', !Taro.$isH5 && 'unShow'].join(' ')}>
      <View className={['menuContent', bottomHight && 'high'].join(' ')}>
        {menuTabList.map((tab, index) => {
          let page = tab.pagePath;
          let isActive = tabIndex === index;
          const bannerValue = tab.banner && banner[tab.banner];

          return tab.center ? (
            <View
              className="item center"
              onClick={() => setTab(index, page)}
              key={tab.iconPath + '_' + index}
            >
              <Image className="centerBarIcon" src={tab.iconPath} />
            </View>
          ) : (
            <View
              className="item common"
              onClick={() => setTab(index, page)}
              key={tab.text + '_' + index}
            >
              {bannerValue ? (
                <View className={classNames('banner', { one: bannerValue.length === 1 })}>
                  <View className="txt">{bannerValue}</View>
                </View>
              ) : null}
              <Image className="barIcon" src={isActive ? tab.selectedIconPath : tab.iconPath} />
              <Text className={classNames('label', { highNight: isActive })}>{tab.text}</Text>
            </View>
          );
        })}
      </View>
    </View>
  );
};

export default MenuTabs;
